<template>
    <view class="menus-box">
        <el-dialog class="munus-el-dialog" :visible.sync="dialogVisible" :modal="false" width="100px">
            <view class="item" v-for="item in list" @click="clickItem(item)" :key="item.id">
                <view class="menu-icon">
                    <image :src="item.path"></image>
                </view>
                <view class="menu-txt">{{ item.title }}</view>
            </view>
        </el-dialog>
    </view>
</template>

<script>
import windBtnContrl from "@/js/WinBtnContrl.js";
import tabBarConntrl from "@/js/TabBarContrl.js";
import goPage from "@/js/GoPage.js";
import lang from "@/js/conf/Lang.js";
import accessCtrl from "@/js/limit/AccessCtrl.js";
import { mapGetters } from "vuex";
export default {
    computed: {
        ...mapGetters(["isExpand"]),
    },
    data() {
        return {
            dialogVisible: false,
            list: [
                {
                    title: lang.swichTxt, // 切换账号
                    id: 2,
                    path: "/static/images/switch.png",
                },
                // {
                //     title: lang.vipTxt,
                //     id: 3,
                //     path: "/static/images/vip-icon.png",
                // },
                {
                    title: lang.exitLbTxt, // 退出登录
                    id: 0,
                    path: "/static/images/exit.png",
                },
            ],
        };
    },
    created() {
        // this.initData();
    },
    methods: {
        async initData() {
            if (true) {
                const data = {
                    title: "云店",
                    id: 6,
                    path: "/static/images/menu07.png",
                    page: "/pages/cloudStoreList/index",
                };
                this.list.unshift(data);
            }
            if (await accessCtrl.getLimitgdsdeploy()) {
                const data = {
                    title: lang.gdconfigTxt,
                    id: 4,
                    path: "/static/images/gd-set-icon.png",
                    page: "/pages/commodityConfig/index",
                };
                this.list.unshift(data);
            }
            if (await accessCtrl.getAboutLimit()) {
                const data = {
                    title: lang.pjconfigTxt,
                    id: 5,
                    path: "/static/images/xm-set-icon.png",
                    page: "/pages/projectConfig/index",
                };
                this.list.unshift(data);
            }
            if (await accessCtrl.getSetLimit()) {
                const data = {
                    title: '设置',
                    id: 55,
                    path: "/static/images/xm-set-icon.png",
                    page: "/pages/setting/index",
                };
                this.list.unshift(data);
            }
            // 实现数组去重 - 根据id去重
            const uniqueIds = new Set();
            this.list = this.list.filter(item => {
                if (uniqueIds.has(item.id)) {
                    return false;
                }
                uniqueIds.add(item.id);
                return true;
            });
        },
        clickItem(item) {
            this.dialogVisible = false;
            if (item.id == 0) {
                tabBarConntrl.close();
            } else if (item.id == 2) {
                tabBarConntrl.switchAccount();
            } else if (item.id == 1) {
                this.$emit("setMenuHandler", item.id);
            } else if (item.id == 3) {
                this.$emit("openVip");
            } else {
                goPage.goNavTo(item.page);
                this.$emit("showTabnar");
            }
        },
    },
};
</script>

<style lang="scss">
.menus-box {
    ::v-deep.el-dialog {
        position: absolute !important;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        left: 72px;
        bottom: 14px;
        background: #292f4c;
        margin-top: 0 !important;
    }

    ::v-deep.el-dialog__header {
        display: none;
    }

    ::v-deep.el-dialog__body {
        padding: 4px 2px !important;
        font-size: 12px !important;
    }

    .item {
        display: flex;
        width: 100%;
        cursor: pointer;

        .menu-icon {
            width: 20px;
            height: 20px;
            margin: 4px;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .menu-txt {
            margin: 4px;
        }
    }

    .item:hover {
        background: #f8f8f8;
    }
}
</style>
